<template>
  <div id="collection-edit">
    <div class="header-box">
      <div class="header">管理合集</div>
      <div class="add-btn" @click="isShowAdd = true">添加项目</div>
      <div class="add-btn" @click="isShowEdit = true">编辑合集信息</div>
    </div>
    <div class="item-box">
      <ArtItem
        :artData="item"
        class="art-item"
        v-for="item in arrayDetail.data[0].shops"
        :key="item.id"
        :type="'myCollection'"
        @getCollectionDetail="getCollectionDetail"
      />
    </div>
    <div class="pagination" v-if="arrayDetail.data[0].shops.length != 0">
      <el-pagination
        :page-size="pageSize"
        :pager-count="5"
        layout="prev, pager, next"
        :current-page="pageIndex"
        :total="arrayDetail.data[0].shops.length"
        background
        @prev-click="prevPage"
        @next-click="nextPage"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
    <div class="no-result" v-if="arrayDetail.data[0].shops.length == 0">
      <span>什么都没找到</span>
    </div>
    <SelectItem
      :array_id="arrayDetail.data[0].id"
      :showFlag="isShowAdd"
      @close="isShowAdd = false"
      @getCollectionDetail="getCollectionDetail"
    />
    <EditCollection
      :showFlag="isShowEdit"
      @close="isShowEdit = false"
      :arrayDetail="arrayDetail"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import ArtItem from "@/components/ArtItem";
import SelectItem from "./SelectItem";
import EditCollection from "./EditCollection";
export default {
  name: "CollectionEdit",
  components: {
    ArtItem,
    SelectItem,
    EditCollection,
  },
  data() {
    return {
      id: 0,
      isShowAdd: false,
      isShowEdit: false,

      // 分页数据
      pageIndex: 1,
      pageSize: 20,
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.$store.dispatch("arrayDetail", {
      id: this.id,
      pageSize: this.pageSize.toString(),
      pageIndex: this.pageIndex.toString(),
      classify: "所有",
      form_of_sale: "所有",
      minprice: "0",
      maxprice: "10000000000000000000000000000",
    });
  },
  computed: {
    ...mapState({
      arrayDetail: (store) => store.array.arrayDetail,
    }),
  },

  methods: {
    // 上一页
    prevPage() {
      this.pageIndex -= 1;
      this.$store.dispatch("arrayDetail", {
        id: this.id,
        pageSize: this.pageSize.toString(),
        pageIndex: this.pageIndex.toString(),
        classify: "所有",
        form_of_sale: "所有",
        minprice: "0",
        maxprice: "10000000000000000000000000000",
      });
    },
    // 下一页
    nextPage() {
      this.pageIndex += 1;
      this.$store.dispatch("arrayDetail", {
        id: this.id,
        pageSize: this.pageSize.toString(),
        pageIndex: this.pageIndex.toString(),
        classify: "所有",
        form_of_sale: "所有",
        minprice: "0",
        maxprice: "10000000000000000000000000000",
      });
    },

    // 页数改变
    pageChange(page) {
      this.pageIndex = page;
      this.$store.dispatch("arrayDetail", {
        id: this.id,
        pageSize: this.pageSize.toString(),
        pageIndex: this.pageIndex.toString(),
        classify: "所有",
        form_of_sale: "所有",
        minprice: "0",
        maxprice: "10000000000000000000000000000",
      });
    },

    // 重新弄获取数据
    getCollectionDetail() {
      this.pageIndex = 1;
      this.$store.dispatch("arrayDetail", {
        id: this.id,
        pageSize: this.pageSize.toString(),
        pageIndex: this.pageIndex.toString(),
        classify: "所有",
        form_of_sale: "所有",
        minprice: "0",
        maxprice: "10000000000000000000000000000",
      });
    },
  },
};
</script>

<style lang='less'>
#collection-edit {
  .header-box {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-left: 20px;
    .header {
      font-size: 22px;
      font-weight: bold;
    }
    .add-btn:hover {
      background: var(--themeColor1);
    }
    .add-btn {
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 14px;
      margin-left: 20px;
      padding: 8px 10px;
      border-radius: 99px;
      background: var(--themeColor4);
      color: #fff;
    }
  }
}
</style>